<div class="col-12 d-flex flex-column flex-wrap text-center" style="max-width: 220px">
    <div class="chart-info d-flex justify-content-between mb-1 mt-2" >
        <div class="series-info d-flex align-items-center">
            <i class="fa fa-circle-o text-bold-700 text-primary"></i>
            <span class="text-bold-600 ml-50">{{$field1['name']}}</span>
        </div>
        <div class="product-result">
            <span>{{$field1['num']}}</span>
        </div>
    </div>

    <div class="chart-info d-flex justify-content-between mb-1">
        <div class="series-info d-flex align-items-center">
            <i class="fa fa-circle-o text-bold-700 text-warning"></i>
            <span class="text-bold-600 ml-50">{{$field2['name']}}</span>
        </div>
        <div class="product-result">
            <span>{{$field2['num']}}</span>
        </div>
    </div>

    <div class="chart-info d-flex justify-content-between mb-1">
        <div class="series-info d-flex align-items-center">
            <i class="fa fa-circle-o text-bold-700 text-danger"></i>
            <span class="text-bold-600 ml-50">{{$field3['name']}}</span>
        </div>
        <div class="product-result">
            <span>{{$field3['num']}}</span>
        </div>
    </div>
    <div class="chart-info d-flex justify-content-between mb-1">
        <div class="series-info d-flex align-items-center">
            <i class="fa fa-circle-o text-bold-700 text-blue"></i>
            <span class="text-bold-600 ml-50">{{$field4['name']}}</span>
        </div>
        <div class="product-result">
            <span>{{$field4['num']}}</span>
        </div>
    </div>
</div>
